<template>
  <div>
    <TopFilter :list="partFilterList" :cols="3" :collapse="false" @filterChange="partChangeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      ref="partTable"
      :columns="partColumns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      selectionType="single"
      :height="200"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.partColumns = columns)"
      :onRowSelectChange="columns => (this.partChangeColumns = columns)"
    ></FilterTable>
    <div class="confirm-button-style">
      <el-button type="primary" @click="saveDialog">确 定</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import { queryBoutiqueForCancel } from '@/api/finance/repairFinance/cancelFinance';
import { getUserId } from '@/assets/js/auth';
import { getUser } from '@/assets/js/auth';
import { getAllUser } from '@/api/customerRepair/activityVisit/resultEntry';

export default {
  name: 'order',
  components: {},
  mixins: [dictionary],
  props: ['WorkSearch_billno'],
  data() {
    this.BaseTable = null;
    return {
      partFilterList: this.createPartFilterList(),
      fetchApi: queryBoutiqueForCancel,
      fetchParams: { xhrAbort: true },
      partColumns: this.createPartColumns(),
      partChangeColumns: [],
      showAddNew: false,
      serviceAdvisorData: []
    };
  },
  mounted() {
    this.BaseTable = this.$refs.partTable.$refs.pageTable;
    this.partFilterList.find(item => item.fieldName === 'billNo').initialValue = this.WorkSearch_billno;
    let param = {
      billNo: this.WorkSearch_billno
    };
    this.partChangeHandle(param);
    this.serachService(); // 锁定人
  },
  methods: {
    createPartFilterList() {
      return [
        {
          type: 'INPUT',
          label: '派工单号',
          fieldName: 'billNo',
          placeholder: '派工单号...'
        },
        {
          type: 'INPUT',
          label: '客户代码',
          fieldName: 'ownerNo',
          placeholder: '客户代码...'
        }
      ];
    },
    createPartColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '装饰派工单',
          dataIndex: 'BILL_NO',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // align:"center"
        },
        {
          title: '客户代码',
          dataIndex: 'CUSTOMER_NO',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
          // align:"center"
        },
        {
          title: '客户名称',
          dataIndex: 'CUSTOMER_NAME',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
          // align:"center"
        },
        {
          title: '派工日期',
          dataIndex: 'ORDER_DATE',
          sorter: true,
          filter: true,
          filterType: 'date-range'
          // align:"center"
        },
        // {
        //   title: '锁定人',
        //   dataIndex: 'LOCK_USER',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        //   render: props => {
        //     return <span>{this.getUserName(props.row.LOCK_USER)}</span>;
        //   }
        //   // align:"center"
        // },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
          // align:"center"
        }
      ];
    },
    partChangeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    async saveDialog() {
      if (!this.partChangeColumns.length) {
        return this.$notify.warning({ title: '提示信息', message: '请选择一条记录！' });
      }
      this.$emit('selectRow', this.partChangeColumns[0]);
      this.closeDialog();
    },
    closeDialog() {
      this.$emit('close', false);
    },
    getUserName(userId) {
      const item = this.serviceAdvisorData.find(x => {
        return x.value == userId;
      });
      return item ? item.text : '';
    },
    async serachService() {
      let res = await getAllUser();
      this.serviceAdvisorData = res.data.map(x => ({ text: x.employeeName, value: x.userId }));
    }
  }
};
</script>

<style lang="less" scoped>
.confirm-button-style {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  border-top: 1px solid #e9e9e9;
  padding: 10px 20px;
  background: #fff;
  text-align: center;
}
</style>
